<template>
    <!-- 没有修饰符 -->
    <component :is="item.itemRender.el" v-bind="getBind(item.itemRender)" clearable v-model.trim="form[item.itemRender.value]" v-on="item.itemRender.events"
        v-if="item.itemRender&& item.itemRender.number===undefined&&item.itemRender.trim===undefined&&item.itemRender.lazy===undefined">
        <template v-if="item.itemRender.el==='el-select'">
            <el-option v-for="(temp,j) in item.itemRender.options" :key='j' v-bind="temp"></el-option>
        </template>
        <template v-if=" item.itemRender.el==='el-checkbox-group'">
            <el-checkbox v-for="(temp,j) in item.itemRender.options" :key='j' v-bind="temp"></el-checkbox>
        </template>
        <template v-if="item.itemRender.el==='el-radio-group'">
            <el-radio v-for="(temp,j) in item.itemRender.options" :key='j' v-bind="temp"></el-radio>
        </template>
        <template v-if="item.itemRender.content">
            {{ item.itemRender.content}}
        </template>
    </component>

    <!-- 修饰符为trim -->
    <!-- <component
        :is="item.itemRender.el"
        v-bind="item.itemRender"
        clearable
        v-model.trim="form[item.itemRender.value]"
        v-on="item.itemRender.events"
        v-else-if="item.itemRender&&item.itemRender.trim===true"
    >
        <template v-if=" item.itemRender.el==='el-select'">
            <el-option
                v-for="(temp,j) in getOption(item.itemRender)"
                :key='j'
                v-bind="temp"
            ></el-option>
        </template>
        <template v-if="item.itemRender.el==='el-checkbox-group'">
            <el-checkbox
                v-for="(temp,j) in getOption(item.itemRender)"
                :key='j'
                v-bind="temp"
            ></el-checkbox>
        </template>
        <template v-if="item.itemRender.el==='el-radio-group'">
            <el-radio
                v-for="(temp,j) in getOption(item.itemRender)"
                :key='j'
                v-bind="temp"
            ></el-radio>
        </template>
        {{ item.itemRender.content}}
    </component> -->

    <!-- 修饰符为number -->
    <component :is="item.itemRender.el" v-bind="getBind(item.itemRender)" clearable v-model.number.trim="form[item.itemRender.value]"
        v-on="item.itemRender.events" v-else-if="item.itemRender&&item.itemRender.number===true">
        <template v-if=" item.itemRender.el==='el-select'">
            <el-option v-for="(temp,j) in item.itemRender.options" :key='j' v-bind="temp"></el-option>

        </template>
        <template v-if=" item.itemRender.el==='el-checkbox-group'">
            <el-checkbox v-for="(temp,j) in item.itemRender.options" :key='j' v-bind="temp"></el-checkbox>
        </template>
        <template v-if=" item.itemRender.el==='el-radio-group'">
            <el-radio v-for="(temp,j) in item.itemRender.options" :key='j' v-bind="temp"></el-radio>
        </template>
        {{ item.itemRender.content}}
    </component>

    <!-- 修饰符为lazy -->
    <component :is="item.itemRender.el" v-bind="getBind(item.itemRender)" clearable v-model.lazy.trim="form[item.itemRender.value]"
        v-on="item.itemRender.events" v-else-if="item.itemRender&&item.itemRender.lazy===true">
        <template v-if=" item.itemRender.el==='el-select'">
            <el-option v-for="(temp,j) in item.itemRender.options" :key='j' v-bind="temp"></el-option>
        </template>
        <template v-if=" item.itemRender.el==='el-checkbox-group'">
            <el-checkbox v-for="(temp,j) in item.itemRender.options" :key='j' v-bind="temp"></el-checkbox>
        </template>
        <template v-if=" item.itemRender.el==='el-radio-group'">
            <el-radio v-for="(temp,j) in item.itemRender.options" :key='j' v-bind="temp"></el-radio>
        </template>
        {{ item.itemRender.content}}
    </component>

</template>

<script>
import ChfTinymce from "@/components/chf-tinymce"
import ChfSesectTree from "@/components/chf-selectTree/index.vue"

export default {
    props: {
        item: {
            default () {
                return {}
            },
            type: Object
        },
        form: {
            default () {
                return {}
            },
            type: Object
        },
    },
    components: {
        ChfTinymce,
        ChfSesectTree
    },
    methods: {
        getBind (item) {
            if (item.el === 'el-input' && !item.maxlength) {
                if (item.type === 'textarea') {
                    item.maxlength = "400"
                } else {
                    item.maxlength = "40"
                }
                item['show-word-limit'] = true;
                return item
            }
            return item
        }
    }
}
</script>
